<template>
  <div class="toast-wrap" :class="{ty0:value}">
    123
  </div>
</template>

<script>
export default {
  data(){
    return{
      // show: false
    }
  },
  props:{
    value:{
      type:Boolean,
      default: false
    }
  },
  methods:{
    // changeShow(){
    //   console.log(this.show)
    //   this.$set(this, 'show', !this.show)
    // }
  }
}
</script>

<style lang="less" scoped>
.toast-wrap{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  min-height: 300px;
  background-color: brown;
  font-size: 48px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 300px;
  transform: translateY(100%);
  transition: transform .5s;
}
.ty0{
  transform: translateY(0);
}
</style>